
<div class="row">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <div class="form-group" style="margin-top:20px">
            <input class="form-control" placeholder="请输入商品标题" [formControl] = 'filter'>
        </div>
    </div>
</div>

<div class="row">
    <!-- <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 card-deck-product-list" *ngFor="let item of products | filter:'title':keyword"> -->
    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 card-deck-product-list" *ngFor="let item of products | async">
        <div class="card">
            <img class="card-img-top" src="http://placehold.it/227X180" alt="Card image cap">
            <div class="card-body">
              <div class="row">
                <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                    <span class="product_title"><a [routerLink]="['/product',item.id]">{{ item.title }}</a></span>
                </div>
                <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                    <span class="product_price">￥{{ item.price}}元</span>
                </div>
              </div>
              <p class="product_des">{{ item.des }}</p>
            </div>
            <div class="card-footer">
              <app-stars [rating]="item.rating"></app-stars>
            </div>
          </div>
      </div>
</div>